HTML: <a>изображение не кликабельно при размещении в определенном регионе

Question

У меня возникает эта действительно странная проблема, когда <img>, хранящийся внутри тега <a>, не активируется, когда я размещаю его в определенном регионе, т.е. на определенной высоте.

После небольшой отладки я обнаружил, что удаление текста Hi, I'm XYZ (не содержащего тега h2!), Похоже, устраняет проблему go.

Я также обнаружил, что перемещение ссылок вверх и вниз (с текстом еще там) заставляет ссылки работать.

Я также протестировал другие окна ширины, и ссылки, кажется, работают для всех из них, за исключением случаев, когда ширина окна составляет от 500 до 550 пикселей.

Ниже HTML:

И CSS:

body{
    font-family: 'Raleway', sans-serif;
    color: #ffffff;
    background-color: #393f4d;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
  }

  a{
    text-decoration: none;
  }

  .nav-bar-title{
    position: relative;

    top: 1rem;
  }
  .nav-bar-title h3{
    font-size: 4rem;
  }

  .nav-bar-title a{
    text-decoration: none;
    color: white;
  }

  .nav-bar-title a:hover{
    text-decoration: none;
    color: #feda6a;
  }

  .nav-bar-links
  {
    position: relative;
    top: 5rem;
  }

  .ext_link
  {
    margin: 2rem;
  }

.title-container
{
  position: relative;
  top: 20rem;
  width: 100%;
}

Я почти уверен, что должен делать что-то глупое. Любая помощь будет оценена!